import React, { Fragment } from 'react';
import { Button, Table } from 'antd';
import router from 'umi/router';
import Result from '@/components/Result';
import styles from './style.less';

class Finish extends React.PureComponent {
  render() {
    const resultInfo = {
      errorCount: 0,
      invoiceNumber: 2,
    };
    const { invApplyData } = this.props;
    const columns = [
      {
        title: '发票类型',
        dataIndex: 'invTypeName',
        align: 'center',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
      },
      {
        title: '发票抬头',
        dataIndex: 'holderName',
        align: 'center',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
      },
      {
        title: '开票金额（元）',
        dataIndex: 'invAmountSum',
        align: 'right',
        onHeaderCell: () => ({ style: { textAlign: 'center', fontWeight: 'bold' } }),
      },
    ];
    const actions = (
      <Fragment>
        <ul>
          <li style={{ float: 'left', margin: '0 0 0 -40px' }}>
            合计开票数量：{invApplyData.invMany} 张
          </li>
          <li style={{ float: 'left', margin: '0 0 0 65px' }}>
            合计开票金额：{invApplyData.money}
          </li>
        </ul>
        <div style={{ clear: 'both' }} />
        <Table
          dataSource={invApplyData.invApplyBillOptVo || []}
          columns={columns}
          bordered
          rowKey={record => record.number}
          pagination={false}
          className={styles.invRowPadding}
          style={{ margin: '20px 0 40px 0' }}
        />

        <Button onClick={() => router.goBack()}>继续操作</Button>
        <Button type="primary" style={{ margin: '0 0 0 20px' }} onClick={() => router.goBack()}>
          完成
        </Button>
      </Fragment>
    );

    return (
      <Result
        type={resultInfo.errorCount ? null : 'success'}
        title={resultInfo.errorCount ? null : '操作成功'}
        actions={actions}
        className={styles.result}
      />
    );
  }
}

export default Finish;
